<template>
    <div style="width:100%;height:100%;" id="data_source_con"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'dataSourcePie',
    data () {
        return {
            //
        };
    },
    mounted () {
        this.$nextTick(() => {
            this.axios({
                method: 'get',
                url: this.$store.state.app.globalUrl+'/admin/Subject/getAllSubjectType',
                data: {}
            }).then(function(res){
                let num1=0;
                let num2=0;
                let num3=0;
                res.data.data.subjectType.forEach(function(v,i){
                    if(v.type==1){
                        num1++;
                    }
                    if(v.type>=2){
                        num2++;
                    }
                    if(v.type>=3){
                        num3++;
                    }
                })
                var dataSourcePie = echarts.init(document.getElementById('data_source_con'));
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: ['单选', '多选', '判断']
                    },
                    series: [
                        {
                            name: '题目占比',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '60%'],
                            data: [
                                {value: num1, name: '单选', itemStyle: {normal: {color: '#9bd598'}}},
                                {value: num2, name: '多选', itemStyle: {normal: {color: '#ffd58f'}}},
                                {value: num3, name: '判断', itemStyle: {normal: {color: '#abd5f2'}}}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                dataSourcePie.setOption(option);
                window.addEventListener('resize', function () {
                    dataSourcePie.resize();
                }); 
            })
            
        });
    }
};
</script>
